<template>
  <div
    class="login"
  >
    <div class="login_bg"></div>
    <div class="company">在线pk平台</div>
    <div
      class="login-right"
    >
      <div class="form-div">
        <a-form-model
          class="demo-ruleForm"
          ref="loginForm"
          :model="loginForm"
          :rules="rules"
        >
          <h2 class="login-title">修改密码</h2>
          <div class="phone mt-8">
            <label class="login-label">手机号</label>
            <a-form-model-item ref="phone" prop="phone">
              <a-input
                class="login-input"
                placeholder="请输入手机号"
                name="phone"
                autoComplete="off"
                v-model="loginForm.phone"
                :maxLength="20"
                @blur="
                  () => {
                    $refs.phone.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
          </div>
          <div class="passwd mt-6">
            <label class="login-label">密码</label>
            <a-form-model-item prop="passwd">
              <a-input
                class="login-input"
                placeholder="请输入密码"
                v-model="loginForm.passwd"
                type="password"
                autocomplete="new-password"
                :maxLength="50"
              />
            </a-form-model-item>
          </div>
          <div class="passwdtwo mt-6">
            <label class="login-label">确认密码</label>
            <a-form-model-item prop="passwds">
              <a-input
                class="login-input"
                placeholder="请再次输入密码"
                v-model="loginForm.passwds"
                type="password"
                autocomplete="new-password"
                :maxLength="50"
              />
            </a-form-model-item>
          </div>
          <div class="keyword mt-6">
            <label class="login-label">验证码</label>
            <a-row>
              <a-col :span="18">
                <a-form-model-item
                  ref="keyword"
                  prop="keyword"
                  :help="helpVerify"
                >
                  <a-input
                    class="login-input"
                    placeholder="请输入验证码"
                    name="keyword"
                    autoComplete="off"
                    v-model="loginForm.keyword"
                    :maxLength="6"
                    @blur="
                    () => {
                      $refs.keyword.onFieldBlur();
                    }
                  "
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-button
                  @click.prevent="createCode"
                  v-if="checkNum"
                  class="lay-verifyF code-btn"
                  style="padding-left: 15px"
                >获取验证码
                </a-button>
                <a-button
                  v-if="!checkNum"
                  class="lay-verifyT code-btn"
                  style="padding-left: 15px"
                  disabled
                >{{ count }}s后重发
                </a-button>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
        <div class="login-button">
          <p class="forget">
            <router-link :to="'/'" class="link"
            ><a-icon type="left" />返回登录
            </router-link
            >
          </p>
          <button v-on:click="onSubmit" class="login-btn" :disabled="disabled">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUpdatePasswordKeyword, updatePassword } from "../../../api/user";
import preventBack from 'vue-prevent-browser-back';

export default {
  name: "UpdatePassword",
  mixins: [preventBack],//注入
  data() {
    let validatePass = (rule, value, callback) => {
      let validateResult = /^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{8,30}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!validateResult.test(value)) {
        callback("请输入8位以上英文+数字");
      } else {
        if (this.loginForm.passwds !== "") {
          this.$refs.loginForm.validateField("passwds");
        }
        callback();
      }
      callback();
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.passwd) {
        callback(new Error("两次密码不相同"));
      }
      callback();
    };
    let checkPhone = (rule, value, callback) => {
      var isMob = /^[1][3,4,5,6,7,8][0-9]{9}$/;
      if (!value) {
        callback(new Error("请输入手机号码"));
      } else if (!isMob.test(value)) {
        callback(new Error("手机号码格式错误"));
      }
      callback();
    };
    let verifyTime = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (this.verifyOutTime) {
        callback(new Error("验证码已失效，请重新获取"));
      }
      callback();
    };
    return {
      disabled: false,//保存按钮不可用
      loginForm: {
        passwd: "",
        passwds: "",
        phone: "",
        keyword: "",
        keywords: "",
        name: "loginForm",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        passwd: [{ validator: validatePass, trigger: "blur" }],
        passwds: [{ validator: validatePass2, trigger: "blur" }],
        keyword: [{ validator: verifyTime, trigger: "blur" }]
      },
      keyword: "",
      responseResult: [],
      checkNum: true,
      count: "",
      timer: null,
      verifyState: false,
      helpVerify: "验证码有效期一分钟！",
      verifyOutTime: false,
    };
  },
  methods: {
    //获取验证码
    createCode() {
      this.$refs.loginForm.validateField("phone", msg => {
        if (msg) {
          this.verifyState = false;
        } else {
          this.$refs.loginForm.validateField("passwd", msg => {
            if (msg) {
              this.verifyState = false;
            } else {
              this.$refs.loginForm.validateField("passwds", msg => {
                if (msg) {
                  this.verifyState = false;
                } else {
                  this.verifyState = true;
                  this.verifyOutTime = false;
                }
              });
            }
          });
        }
      });

      if (!this.verifyState) return;
      getUpdatePasswordKeyword({ phone: this.loginForm.phone, type: 1 }).then(
        res => {
          this.loading = false;
          if (res.result == "success") {
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.checkNum = false;
              this.timer = setInterval(() => {
                if (this.count > 1 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.checkNum = true;
                  clearInterval(this.timer);
                  this.timer = null;
                  // this.helpVerify = '验证码已失效，请重新获取！'
                  this.verifyOutTime = true;
                }
              }, 1000);
            }
            this.loginForm.keywords = res.keyword;
          }
        }
      );
    },
    //点击保存
    onSubmit() {
      this.disabled = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (
            !this.verifyOutTime &&
            this.loginForm.keywords == this.loginForm.keyword
          ) {
            updatePassword(this.loginForm).then(res => {
              this.loading = false;
              this.disabled = false
              if (res.result == "success") {
                this.$message.success("修改成功,返回登录页面", 3);
                setTimeout(() => {
                  //需要延迟的代码 :3秒后延迟跳转到首页，可以加提示什么的
                  this.$router.push({
                    name: "Login"
                  });
                  //延迟时间：3秒
                }, 3000);
              } else if (res.result == "failed") {
                this.loginForm.keyword = "";
                this.loginForm.passwd = "";
                this.loginForm.passwds = "";
                // this.$message.warning(res.message);
              } else {
                // this.$message.error(res.message);
              }
            });
          } else {
            this.$message.warning("验证码错误！");
          }
        } else {
          return false;
        }
      });
    },
    show(data) {
      this.$notification.open({
        message: "错误信息",
        description: data,
        style: {
          color: "red"
        }
      });
    },
    goOff() {
      this.$router.push('/');
    }
  }
};
</script>

<style lang="less" scoped>

.login {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  background: url('../../../assets/login_bg.jpg') no-repeat center;
  background-size: 100% auto;
}
.login_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(left,#0147f8,#0130F8);
  opacity: 0.5;
}
.company {
  position: absolute;
  bottom: 40px;
  left: 0;
  z-index: 3;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
.login-right {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -270px;
  margin-top: -290px;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 540px;
  height: 580px;
  border-radius: 10px;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,.16);
  background-color: #fff;
  box-sizing: border-box;
}
.form-div {
  width: 426px;
}
.login-input {
  width: 100%;
  font-size: 14px;
  height: 35px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 4px;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 16px;
  line-height: 40px;
  background: #005aff;
  letter-spacing: .025em;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.verification {
  position: relative;
  height: 80px;
}

/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button,/deep/ .vjs-custom-skin > .video-js .vjs-control-bar {
  display: none!important;
}

.login-title {
  font-size: 20px;
  line-height: 2;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}
.login-label {
  letter-spacing: .025em;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
}
.ant-form-item-with-help {
  margin-bottom: 1px!important;
}
.forget {
  text-align: right;
}
.forget .link {
  color: #0092FC;
}
.code-btn {
  width: 100%;
  height: 35px;
  margin-top: 1px;
  background: #005aff;
  color: #fff;
}
@media screen and (max-width: 1366px) {
  .company {
    bottom: 20px;
  }
}
</style>
